<template>
    <div id="GovernmentMana">
        
        <div class="top_content">
            <div class="title">
                <h1>企业碳排放</h1>
                <p>Government carbon management</p>
            </div>
        </div>
        
        <div class="mid_content clearfix">
            <div class="titleBG">碳盘查</div>
            <div class="content">
                <el-image :src="url1" :preview-src-list="srcList" :initial-index="0" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanpancha.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:130px">碳监测计划编制</div>
            <div class="content">
                <el-image :src="url2" :preview-src-list="srcList" :initial-index="1" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanjiance.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:130px">碳达峰实施方案</div>
            <div class="content">
                <el-image :src="url3" :preview-src-list="srcList" :initial-index="2" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tandafeng.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:130px">碳减排规划</div>
            <div class="content">
                <el-image :src="url4" :preview-src-list="srcList" :initial-index="3" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanjianpai.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:130px">碳足迹认证</div>
            <div class="content">
                <el-image :src="url5" :preview-src-list="srcList" :initial-index="4" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanzuji.png" alt=""> -->
            </div>
            <div class="titleBG" style="width:130px">碳管理体系搭建</div>
            <div class="content">
                <el-image :src="url6" :preview-src-list="srcList" :initial-index="5" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanzuji.png" alt=""> -->
            </div>
        </div>
    </div>
</template>
<script>


export default {
  data() {
    return {
        tableData:[{
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },],
        formInline:{
            user: '',
            region: '',
            type:[],
        },
        treeIndex:1,
        alltypes:['乙醇','烟煤','褐煤','洗精煤','其他洗煤','煤制品','焦炭','原油','燃料油','汽油','柴油','一般煤油',
        '石油焦','液化天然气','液化石油气','焦油','粗苯','其他石油制品','炼厂干气','焦炉煤气','高炉煤气','转炉煤气','电石炉炉气',
        '其他煤气','天然气','二甲苯','冰纯酸',],
        table_edit_all_1_show:true,
        table_edit_all_2_show:true,
        table_edit_all_3_show:true,
        table_edit_all_4_show:true,
        url1:require('../../assets/tanpancha.png'),
        url2:require('../../assets/tanjiance.png'),
        url3:require('../../assets/tandafeng.png'),
        url4:require('../../assets/tanjianpai.png'),
        url5:require('../../assets/tanzuji.png'),
        url6:require('../../assets/tantixi.png'),
        srcList:[require('../../assets/tanpancha.png'),
                require('../../assets/tanjiance.png'),
                require('../../assets/tandafeng.png'),
                require('../../assets/tanjianpai.png'),
                require('../../assets/tantixi.png'),require('../../assets/tantixi.png'),]
        
    }
  },
  methods:{
    load(){

    },
    toDetail(index){
      this.$router.push({path:'articleRead',query:{back:'/'}});
    },
    toMore(){

    },
    onSubmit(){

    },
  },
  mounted(){
    window.scrollTo(0,0);
  }
}
</script>


<style scoped>
#AboutUs{
    position: relative;
}
.top_content{
    width:100%;
    height:480px;
    background: url("../../assets/a.png");
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;

}
.top_content .title{
    margin-top: 60px;
    color: #333;
}
.mid_content{
    width: 1080px;
    position:relative;
    left: 50%;
    margin-left:-540px;
    top:-300px;
    min-height: 600px;
    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.mid_content_left{
    width: 30%;
    float: left;
}
.mid_content_right{
    width: 70%;
    float: left;
}
.leftTitle{
    line-height: 40px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom:20px;
}
.childTitle{
    color:#333;
    font-size: 16px;
    line-height: 40px;
}
.table_edit_all{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #fdfdfd;
}
.table_edit_all .childTitle{
    color:#666;
    line-height: 40px;
}
.message_edit{
    border: 1px solid #efefef;
    padding:10px 10px 0;
}
.content1_detail p{
    color: #666;
    font-size: 16px;
    text-indent: 20px;
}
.titleBG{
    width: 100px;
    height: 60px;
    background:url('../../assets/bgtitle.png');
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;
    line-height: 80px;
    color:#666;
}
.content{
    width:100%;
    text-align: center;
}
.content img{
    max-width:100%;
    margin:auto;
}
</style>